<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Prototype Unit test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="../../ext/prototype.js" type="text/javascript"></script>
  <script src="../lib/unittest.js" type="text/javascript"></script>
  <script src="../../backend-debug.js?load=prototype" type="text/javascript"></script>
  <link rel="stylesheet" href="../test.css" type="text/css" />
</head>
<body>
<h1>Backend Unit test file</h1>
<p>
  Test of utility functions in prototype.js
</p>

<!-- Log output -->
<div id="testlog"> </div>

<!-- Test DIV's -->
<div id="testWhen" style="display: none;"></div>

<div>
<div id="up" style="display: none;"></div>
<div id="down" style="display: none;"></div>
</div>

<textarea id="container" style="display: none;" disabled="true">
<div id="template#{id}"><input type="text" name="txt#{id}"/></div>
</textarea>

<form id="testForm" style="display: none;">
    <input type="text" name="f1" id="f1"></input>
    <input type="checkbox" name="f2" value="2" id="f2"></input>
    <select name="f3" id="f3"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
    <textarea name="f4" id="f4"></textarea>
    <input type="text" name="f5[]" id="f5_1"></input>
    <input type="text" name="f5[]" id="f5_2"></input>
    <input type="text" name="f6[one]" id="f6_one"></input>
    <input type="text" name="f6[two]" id="f6_two"></input>
    <input type="text" name="f7[one][]" id="f7_one_1"></input>
    <input type="text" name="f7[one][]" id="f7_one_2"></input>
    <input type="text" name="f8[one][one]" id="f8_one_one"></input>
    <input type="text" name="f8[one][two]" id="f8_one_two"></input>
    <input type="text" name="f9[][one]" id="f9_1_one"></input> <!--?-->
    <input type="text" name="f9[][two]" id="f9_2_two"></input>
    <input type="radio" name="f10" id="f10_1" value="1"/>
    <input type="radio" name="f10" id="f10_2" value="2"/>
    <input type="radio" name="f10" id="f10_3" value="3"/>
    <select name="f11[][name]" id="f11_1"><option value="one">1</option><option value="two">2</option><option value="three">3</option></select>
    <select name="f11[][name]" id="f11_2"><option value="one">1</option><option value="two">2</option><option value="three">3</option></select>
    <input type="text" name="_undef" id="_undef" value="_intact"/>
    <!--select name="f10" id="f10" multiple="yes"><option value="1"></option><option value="2"></option></select-->
</form>

<!--form id="testForm2" style="display: none;">
    <input type="checkbox" name="cb1" id="cb1" value="" checked="yes"/>
    <input type="checkbox" name="cb2" id="cb2" value=""/>
    <input type="checkbox" name="cb3" id="cb3" value="" checked="yes"/>
    <input type="checkbox" name="cb4" id="cb4" value="zzz" checked="yes"/>
    <input type="checkbox" name="cb5" id="cb5" value="yyy"/>
</form-->

<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
  new Test.Unit.Runner({
    testNs: function() {with(this) {
        $ns('TestNS');
        $ns('TestNS.a');
        $ns('TestNS.a.b');
        assertNotUndefined(window.TestNS);
        assertNotUndefined(window.TestNS.a);
        assertNotUndefined(window.TestNS.a.b);
        assertRaise('SyntaxError', function() { $ns('TestNS.1'); } );
        assertRaise('SyntaxError', function() { $ns('TestNS.)(*)(*!@#'); } );
    }},

    testBuild: function() {with(this) {
        assert($B('b') == '<b></b>');
        assert($B('b', 'test') == '<b>test</b>');
        assert($B('div', {style: 'display: none;'}) == '<div style="display: none;"></div>');
        assert($B('div', {'class': 'x'}, 'y') == '<div class="x">y</div>');
        assert($B('div', {'class': 'x'}, [$B('div')]) == '<div class="x"><div></div></div>');
        assert($B('div', {'class': 'x'}, [$B('div')], 'y') == '<div class="x">y<div></div></div>');
        assert($B('div', [$B('div')], 'y') == '<div>y<div></div></div>');
    }},

    // @todo ifExists ifNo
    testWhen: function(){with(this) {
        assert(Element.when('testWhen', function() { return true; }));
        assert(!Element.when('nonExistent', function() { }));
    }},
    testMoveUp: function(){with(this) {
        $('up').moveDown();
        assert($('down').next() == $('up'));
        assertNothingRaised(function() { $('up').moveDown() });
    }},
    testMoveDown: function(){with(this) {
        $('up').moveUp();
        ($('up').next() == $('down'));
        assertNothingRaised(function() { $('up').moveUp() });
    }},

    // @todo IE, Opera
    testEvaluate: function(){with(this) {
        var s = '<div id="template3"><input type="text" name="txt3"/></div>';
        assert($('container').evaluate({id: 3}).strip().toLowerCase() == s.strip().toLowerCase());
    }},

    testFormDeserialize: function(){with(this) {
        var testData = {
            f1: 1, 
            f2: 2, 
            f3: 3, 
            f4: 4, 
            f5: [5,6], 
            f6: {one: 7, two: 8}, 
            f7: {one: [9,10]}, 
            f8: {one: {one: 11, two: 12}}, 
            f9: [{one: 13, two: 14}, {one: 15, two: 16}],
            f10: 2,
            f11: [{name: 'one'}, {name: 'three'}]
        };

        $('testForm').deserialize(testData);

        assert($('f1').value == 1);
        assert($('f2').checked == true);
        assert($('f3').value == 3);
        assert($('f4').value == 4);
        assert($('f5_1').value == 5);
        assert($('f5_2').value == 6);
        assert($('f6_one').value == 7);
        assert($('f6_two').value == 8);
        assert($('f7_one_1').value == 9);
        assert($('f7_one_2').value == 10);
        assert($('f8_one_one').value == 11);
        assert($('f8_one_two').value == 12);
        assert($('f9_1_one').value == 13);
        assert($('f9_2_two').value == 16);
        assert($('f10_2').checked == true);
        assert($('f11_1').value == 'one');
        assert($('f11_2').value == 'three');
        assert($('_undef').value == '_intact');
    }},

/*    testFlagsGetValue: function() {with(this) {      
        var f = $('testForm2').serialize(true);

        assert(f.cb1 == true);
        assert(f.cb2 == false);
        assert(f.cb3 == true);
        assert(f.cb4 == 'zzz');
        assert(f.cb5 == undefined);
    }},

    testFlagsSetValue: function(){ with(this) {
        $('cb1').setValue(false);
        $('cb2').setValue(true);
        $('cb3').setValue('shit');
        $('cb4').setValue('ttt');
        $('cb5').setValue(true);

        assert($('cb1').getValue() == false);
        assert($('cb2').getValue() == true);
        assert($('cb3').getValue() == true);
        assert($('cb4').getValue() == null);
        assert($('cb5').getValue() == null);
    }},*/

    // selects are shitty. rewrite with class code.
    testSelect: function() {with(this) {
        var options = [{id: 1, name: 'xxx'}, {id: 2, name: 'yyy', dumb: 'ccc'}, {id: 3, _name: 'xxx'}, {id: 4, name: 'fff'}];
        var before = [{id: '', name: 'S'}];
        var after = [{id: '', name: 'A'}];
        var testS = '<option value="">S</option><option value="1">xxx</option><option value="2">yyy</option><option value="3"></option><option value="4">fff</option><option value="">A</option>';

        var s = Backend.Prototype.Select.formatOptions(options, {
            valueMember: 'id',
            displayMember: 'name',
            before: before,
            after: after          
        });

        assert(testS.toLowerCase() == s.toLowerCase());
    }},

    testSelectWrongOptions: function() {with(this) {
        var options = [{id: 1, name: '1'}];

        var s = Backend.Prototype.Select.formatOptions(options, {
            valueMember: 'id',
            displayMember: 'name',
            before: null
        });

        assert(s.toLowerCase() == '<option value="1">1</option>');
    }}
  });
// ]]>
</script>
</body>
</html>